<template>
  <el-dialog
    v-model="dialogVisible"
    :title="`${dataInfo ? '修改' : '新增'}集装箱`"
    width="600"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formValues"
      :rules="rules"
      label-width="120px"
      style="padding: 0 20px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="集装箱编号" prop="containerNum">
            <el-input v-model="formValues.containerNum" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购买日期" prop="buyTime">
            <el-date-picker v-model="formValues.buyTime" type="date" placeholder="请选择购买日期" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="生产商" prop="producer">
            <el-input v-model="formValues.producer" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="型号" prop="model">
            <el-input v-model="formValues.model" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="尺寸/英尺" prop="size">
            <el-input v-model="formValues.size" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="载荷/kg" prop="loadWeight">
            <el-input v-model="formValues.loadWeight" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="自重/kg" prop="deadWeight">
            <el-input v-model="formValues.deadWeight" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="内体积/m3" prop="volume">
            <el-input v-model="formValues.volume" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="总重量(阈值)" prop="totalWeight">
            <el-input v-model="formValues.totalWeight" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="前后偏载(阈值)" prop="frontRear">
            <el-input v-model="formValues.frontRear" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="左右偏载(阈值)" prop="leftRight">
            <el-input v-model="formValues.leftRight" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属公司" prop="company">
            <el-input v-model="formValues.company" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleOk(formRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElRow, ElCol, ElForm, ElFormItem, ElInput, ElDatePicker, ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

const props = defineProps({
  visible: Boolean,
  dataInfo: Object
})

const emits = defineEmits<{
  (e: 'ok', p: any): void
  (e: 'cancel'): void
}>()

const dialogVisible = ref(false)
watch(
  () => props.visible,
  () => {
    if (props.visible && !props.dataInfo) {
      formRef.value?.resetFields()
      formValues.value = {
        containerNum: '',
        buyTime: '',
        producer: '',
        size: '',
        model: '',
        loadWeight: '',
        deadWeight: '',
        volume: '',
        company: '',
        totalWeight: '',
        frontRear: '',
        leftRight: ''
      }
    }
    dialogVisible.value = props.visible
  }
)

const formRef = ref<FormInstance>()

const formValues = ref({
  containerNum: '',
  buyTime: '',
  producer: '',
  size: '',
  model: '',
  loadWeight: '',
  deadWeight: '',
  volume: '',
  company: '',
  totalWeight: '',
  frontRear: '',
  leftRight: ''
})

const checkContainerNum = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入集装箱编号'))
  }
  if (value.length !== 11) {
    return callback(new Error('集装箱编号长度不符'))
  } else {
    return callback()
  }
}

const rules = reactive<FormRules>({
  containerNum: [
    { required: true, message: '请输入集装箱编号', trigger: 'blur' },
    { validator: checkContainerNum, trigger: 'change' }
  ],
  buyTime: [{ required: true, message: '请选择购买日期', trigger: 'change' }],
  producer: [{ required: true, message: '请输入生产商', trigger: 'blur' }],
  model: [{ required: true, message: '请输入型号', trigger: 'blur' }],
  size: [{ required: true, message: '请输入尺寸/英尺', trigger: 'blur' }],
  loadWeight: [{ required: true, message: '请选择载荷', trigger: 'change' }],
  deadWeight: [{ required: true, message: '请输入自重', trigger: 'blur' }],
  volume: [{ required: true, message: '请输入内体积', trigger: 'blur' }],
  totalWeight: [{ required: true, message: '请输入总重量', trigger: 'blur' }],
  frontRear: [{ required: true, message: '请输入前后偏载', trigger: 'blur' }],
  leftRight: [{ required: true, message: '请输入左右偏载', trigger: 'blur' }],
  company: [{ required: true, message: '请输入所属公司', trigger: 'blur' }]
})

watch(
  () => props.dataInfo,
  () => {
    if (props.dataInfo) {
      const {
        containerNum,
        buyTime,
        producer,
        size,
        model,
        loadWeight,
        deadWeight,
        volume,
        company,
        totalWeight,
        frontRear,
        leftRight
      } = props.dataInfo
      formValues.value = {
        containerNum,
        buyTime,
        producer,
        size,
        model,
        loadWeight,
        deadWeight,
        volume,
        company,
        totalWeight,
        frontRear,
        leftRight
      }
    }
  }
)

const handleClose = () => {
  formRef.value?.resetFields()
  emits('cancel')
}

const handleOk = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((errors) => {
    if (errors) {
      const {
        containerNum,
        buyTime,
        producer,
        size,
        model,
        loadWeight,
        deadWeight,
        volume,
        company,
        totalWeight,
        frontRear,
        leftRight
      } = formValues.value
      let params: any = {
        containerNum,
        buyTime,
        producer,
        size,
        model,
        loadWeight,
        deadWeight,
        volume,
        company,
        totalWeight,
        frontRear,
        leftRight
      }
      if (props.dataInfo) {
        const { id } = props.dataInfo
        params = {
          ...params,
          id
        }
      }
      emits('ok', params)
    } else {
      ElMessage({
        message: '请完善信息',
        type: 'warning'
      })
    }
  })
}
</script>
